
  let on=document.querySelectorAll('main .top .one li');
  console.log(on);
  let bl = document.querySelectorAll('main .body .bl');
  console.log(bl);
  let br = document.querySelectorAll('main .body .br');
  console.log(br);
  for(let i=0;i<3;i++){
    on[i].onclick=function (){
      for (let j=0;j<3;j++){
        if(j==i){
          on[j].className='on';
          bl[j].style.display='block';
          br[j].style.display='block';
        }
        else {
          on[j].className='';
          bl[j].style.display='none';
          br[j].style.display='none';
        }
      }
    }
  }


  function animate(obj, target, callback) {
    // console.log(callback);  callback = function() {}  调用的时候 callback()

    // 先清除以前的定时器，只保留当前的一个定时器执行
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
      // 步长值写到定时器的里面
      // 把我们步长值改为整数 不要出现小数的问题
      // var step = Math.ceil((target - obj.offsetLeft) / 10);
      var step = (target - obj.offsetLeft) / 10;
      step = step > 0 ? Math.ceil(step) : Math.floor(step);
      if (obj.offsetLeft == target) {
        // 停止动画 本质是停止定时器
        clearInterval(obj.timer);
        // 回调函数写到定时器结束里面
        // if (callback) {
        //     // 调用函数
        //     callback();
        // }
        callback && callback();
      }
      // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
      obj.style.left = obj.offsetLeft + step + 'px';

    }, 15);
  }
  //获取元素
  let aprev=document.querySelector('.aprev')
  let anext=document.querySelector('.anext')
  //动态生成小方块的个数
  let ul = document.querySelector('.main')
  let cicle = document.querySelector('.circle')
  ul.addEventListener('mouseenter',function (){
    clearInterval(timer);

  })
  ul.addEventListener('mouseleave',function (){
    let timer = setInterval(function() {
      //手动调用点击事件
      anext.click();
    }, 5000);
  })
  console.log(ul.children.length);
  for(let i=0;i<ul.children.length;i++){
    //创建li
    let li=document.createElement('li');
    // 记录当前小圆圈的索引号 通过自定义属性来做
    li.setAttribute('index', i);
    //把li插入到方块ul中
    cicle.appendChild(li);
    //4.小圆圈的排他思想 我们可以直接在生成小圆圈的同时直接绑定点击事件
    li.addEventListener('click',function (){
      //把所有的li清楚on类名
      for(let i=0; i<cicle.children.length;i++){
        cicle.children[i].className='';
      }
      //留下我自己 当前的li设置类名on
      this.className='on';
      let index = this.getAttribute('index');
      // 当我们点击li 就要把索引号给num
      num=index;
      cnum=index;
      console.log(index)
      let focusWidth = 1000;
      //点击小圆圈移动图片 移动的是ul
      //ul的移动距离 小圆圈的索引号乘于宽度 注意是fu值
      animate(ul,-index*focusWidth);
    })
  }
  // 改变背景颜色
  cicle.children[0].className='on';
  var first = ul.children[0].cloneNode(true);
  ul.appendChild(first);
  //点击右侧按钮，图片滚动一张
  let num=0;
  let cnum=0;
  let focusWidth=1000;
  //右侧按钮
  anext.addEventListener('click',function (){
    //如果走到最后一张，刷新
    if(num==ul.children.length-1){
      ul.style.left=0;
      num=0;
    }
    num++;
    animate(ul,-num*focusWidth)
    // 8. 点击右侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放
    cnum++;
    // 如果circle == 4 说明走到最后我们克隆的这张图片了 我们就复原
    if (cnum == cicle.children.length) {
      cnum = 0;
    }
    // 调用函数
    circleChange();
  })
  // 9. 左侧按钮做法
  aprev.addEventListener('click', function() {

      if (num == 0) {
        num = ul.children.length - 1;
        ul.style.left = -num * focusWidth + 'px';

      }
      num--;
      animate(ul, -num * focusWidth)
      // 点击左侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放
      cnum--;
      // 如果circle < 0  说明第一张图片，则小圆圈要改为第4个小圆圈（3）
      // if (circle < 0) {
      //     circle = ol.children.length - 1;
      // }
      cnum = cnum < 0 ? cicle.children.length - 1 : cnum;
      // 调用函数
      circleChange();

  });

  function circleChange() {
    // 先清除其余小圆圈的current类名
    for (let j = 0; j < cicle.children.length; j++) {
      cicle.children[j].className = '';
    }
    // 留下当前的小圆圈的current类名
    cicle.children[cnum].className = 'on';
  }
  var timer = setInterval(function() {
    //手动调用点击事件
    anext.click();
  }, 10000);

  
